<template>
  <div class="h-screen flex flex-col overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
    <!-- 导航栏 -->
    <nav class="flex-none bg-white/80 backdrop-blur-xl border-b border-white/20 shadow-xl shadow-blue-900/10">
      <div class="max-w-7xl mx-auto px-6">
        <div class="flex justify-between items-center h-20">
          <!-- Logo和标题 -->
          <div class="flex items-center space-x-4">
            <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl flex items-center justify-center shadow-lg">
              <div class="i-mdi:check-circle text-white text-2xl"></div>
            </div>
            <div>
              <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-700 bg-clip-text text-transparent">
                学生成绩分析系统
              </h1>
              <p class="text-xs text-gray-500 mt-1">Student Performance Analytics</p>
            </div>
          </div>

          <!-- 导航链接 -->
          <div class="hidden lg:flex items-center space-x-1">
            <RouterLink v-for="item in navItems" :key="item.path" :to="item.path"
              class="group relative px-4 py-3 rounded-xl text-sm font-medium transition-all duration-300 hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:shadow-md"
              active-class="bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700 shadow-md">
              <span class="flex items-center space-x-2">
                <div :class="item.icon" class="w-4 h-4"></div>
                <span>{{ item.name }}</span>
              </span>
              <div
                class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-indigo-500 transition-all duration-300 group-hover:w-8">
              </div>
            </RouterLink>
          </div>

          <!-- 用户信息 -->
          <div class="flex items-center space-x-4">
            <div class="hidden md:flex items-center space-x-3 bg-white/60 backdrop-blur-sm rounded-xl px-4 py-2 border border-white/20">
              <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
                <span class="text-white text-sm font-medium">{{ userInfo.username.charAt(0).toUpperCase() }}</span>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-700">{{ userInfo.username }}</p>
                <p class="text-xs text-gray-500">学生</p>
              </div>
            </div>
            <button @click="handleLogout"
              class="group bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
              <span class="flex items-center space-x-2">
                <div class="i-mdi:logout text-base"></div>
                <span>退出登录</span>
              </span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-1 overflow-y-auto p-6">
      <div class="max-w-7xl mx-auto">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<script setup>
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { computed } from 'vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 导航项配置
const navItems = [
  {
    name: '仪表板',
    path: '/dashboard',
    icon: 'i-mdi:view-dashboard'
  },
  {
    name: '我的课程',
    path: '/courses',
    icon: 'i-mdi:book-open-variant'
  },
  {
    name: '我的成绩',
    path: '/grades',
    icon: 'i-mdi:check-circle'
  },
  {
    name: '成绩分析',
    path: '/grade-analysis',
    icon: 'i-mdi:chart-line'
  },
  {
    name: '个人资料',
    path: '/profile',
    icon: 'i-mdi:account'
  }
]

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('isAuthenticated')
  localStorage.removeItem('userInfo')
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 获取用户信息
const userInfo = computed(() => {
  try {
    const stored = localStorage.getItem('userInfo')
    return stored ? JSON.parse(stored) : { username: '用户' }
  } catch {
    return { username: '用户' }
  }
})
</script>

<style lang="scss" scoped>
// 自定义滚动条样式
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3b82f6, #6366f1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #2563eb, #4f46e5);
}

// 导航链接激活状态动画
.router-link-active {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #6366f1);
    border-radius: 1px;
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .nav-items {
    display: none;
  }
}

// 玻璃态效果增强
.backdrop-blur-xl {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
</style> 